<template>
    <div>
        <el-header>
            <div class="logo">
                <!--<img src="static/img/logo2.jpg" alt="">-->
                <img src="static/img/header-logo.png" alt="" height="35"/>
                <span class="head_span">权限管理平台</span>
            </div>
            <!--<img class="header_txt" :style="{'margin-left' : (inExam ? '-169px' : '')}" src="static/img/header_txt.png"-->
                 <!--alt="">-->
            <!--退出按钮-->
            <div class="head_logo" @click="loginOut()" style="cursor:pointer;font-size:14px;color:#606266;margin-right:18px;">
                <!--<i class="iconfont icon-tuichu fr"></i>-->
                <span class="line_hr">|</span>退出登录
            </div>
            <div class="fr change_pwd" @click="handleCommand">
                <span class="line_hr">|</span>修改密码
            </div>
            <!--<el-dropdown class="fr" trigger="click" @command="handleCommand" placement="bottom-start">-->
                <div class="user">
                    <!--<i class="iconfont icon-xiala fr"></i>-->
                    <!--<div class="fr change_pwd">修改密码</div>-->
                    <div class="user_name">
                        {{userName}}
                    </div>
                </div>
                <!--<el-dropdown-menu slot="dropdown">-->
                    <!--<el-dropdown-item command="updatePassword" style="text-align:left;">修改密码</el-dropdown-item>-->
                <!--</el-dropdown-menu>-->
            <!--</el-dropdown>-->
        </el-header>
        <!--密码修改dialog-->
        <el-dialog title="修改密码" :visible.sync="dialogUpdatePwVisible">
            <el-form ref="form" :model="user" :rules="rule" label-width="100px" style="width: 80%;margin: auto;">
                <el-form-item label="旧密码" prop="password">
                    <el-input type="password" auto-complete="off" v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" v-model="user.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="repeatPw">
                    <el-input type="password" v-model="user.repeatPw"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="check" type="primary" @click="updateNewPs" style="margin-bottom: 20px;">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
  export default {
    props: {
      inExam: {
        default: null,
        type: Boolean
      }
    },
    data () {
      var validateNewPw = (rule, value, callback) => {
        if (this.user.repeatPw !== '') {
          this.$refs.form.validateField('repeatPw')
        }
        callback()
      }
      var validateRepeatPw = (rule, value, callback) => {
        if (value !== this.user.newPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        userName: sessionStorage.getItem('userName'),
        dialogUpdatePwVisible: false,
        user: {
          password: '',
          newPassword: '',
          repeatPw: ''
        },
        rule: {
          newPassword: [
            {required: true, message: '请输入新密码', trigger: 'blur'},
            {validator: validateNewPw, trigger: 'blur'}
          ],
          repeatPw: [
            {required: true, message: '请现次输入密码', trigger: 'blur'},
            {validator: validateRepeatPw, trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入旧密码', trigger: 'blur'}
          ]
        },
      }
    },
    methods: {
      handleCommand () {
        this.user = {
          password: '',
          newPassword: '',
          repeatPw: ''
        }
        this.dialogUpdatePwVisible = true
      },
      loginOut () {
        let self = this
        sessionStorage.clear()
        self.$router.push('/login')
      },
      updateNewPs () {
        let self = this
        self.$refs.form.validate((valid) => {
          self.$axios
            .post('commonRest/updateNewPs', {
              oldPassword: self.user.password,
              newPassword: self.user.newPassword
            })
            .then((res) => {
              console.log(res)
              if (res.data.result) {
                self.$message({
                  message: '修改成功',
                  type: 'success'
                })
                self.dialogUpdatePwVisible = false
              } else {
                self.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
              }
            })
        })
      }
    }
  }
</script>
<style lang="scss">
    .el-header {
        position: relative;
        z-index: 9;
        background-color: white;
        box-shadow: 0px 0px 17px -2px #3c3c3c;
        color: #333;
        line-height: 60px;
        align-items: flex-start;
        .change_pwd{
            cursor: pointer;
            font-size:14px;
            color:#606266;
        }
        .line_hr{
            color:#606266;
            padding:0 10px;
        }
        .logo img {
            margin-top: -3px;
        }
        .header_txt {
            position: absolute;
            top: 8px;
            left: 50%;
            margin-left: -100px;
        }
        .icon-xiala {
            color: #d32f2f;
            font-size: 15px;
            margin: 2px 20px 0 2px;
        }
        .user {
            cursor: pointer;
            color:#606266;
        }
        .user_name {
            font-size: 14px;
        }
        .icon-tuichu {
            cursor: pointer;
            color: #d32f2f;
            font-size: 18px;
            font-weight: bold;
        }
        .head_span{
            font-size: 22px;
            font-weight: bold;
        }
    }
</style>